<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<title>个人信息</title>
		<link rel="stylesheet" href="./css/style.css">
		<script src="https://vue.wangyc.top/vue/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
	</head>
	<body>
		<div id="user-change">
			<!-- 原始信息 -->
			<!-- <div v-if="changeAgo">
				<div class="list">
					<div class="name">
						<img src="./img/icon_name.png">
						<input type="stylesheet" placeholder="输入你的姓名" :placeholder="change_name">
					</div>
					<div class="name">
						<img src="./img/icon_phone.png">
						<input type="stylesheet" placeholder="输入你的电话" :placeholder="change_tel" v-model="change_mobile" @change="judgeTel">
					</div>
					<div class="name">
						<img src="./img/icon_company.png">
						<input type="stylesheet" placeholder="输入你的工作单位" :placeholder="change_company">
					</div>
				</div>
				<button type="confirm" class="button_5" @click="changeUserNews">修改 </button>
			</div> -->

			<!-- 显示需要修改的信息 -->

			<div class="list">
				<div class="name">
					<img src="./img/icon_name.png">
					<input type="stylesheet" placeholder="输入你的姓名" :placeholder="change_name">
				</div>
				<div class="name">
					<img src="./img/icon_phone.png">
					<input type="stylesheet" placeholder="输入你的电话" :placeholder="change_tel" v-model="change_mobile">
				</div>
				<div class="name" v-if="changeAgo">
					<img src="./img/icon_cert.png">
					<input type="stylesheet" placeholder="输入验证码" v-model="change_code">
					<button type="confirm" class="button_2" @click="getUcodeChange">{{content}}</button>
				</div>
				<div class="name">
					<img src="./img/icon_company.png">
					<input type="stylesheet" placeholder="输入你的工作单位" :placeholder="change_company">
				</div>
			</div>
			<button type="confirm" class="button_5" @click="changeUserNews">修改</button>



			<div class="mask" v-if="change_success"></div>
			<div class="popwindow2" v-if="change_success">
				<img src="./img/icon_succeed.png">
				<p>个人信息修改成功</p>
			</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#user-change',
				data: {
					url: 'https://newwk.sjwke.com/app/index.php?i=62&c=entry&do=front&m=smc_zhongchou',
					change_success: false,
					change_name: '',

					change_tel: '',
					change_code: '',
					change_company: '',

					change_mobile: '',

					// 验证码校验
					content: '获取验证码',
					totalTime: 30,
					canClick: true, //添加canClick
					// 用户信息
					// userInfo:{}
					// 如果手机号码不一致 
					changeAgo: false,
				},
				methods: {
					// 提交修改后数据
					changeUserNews() {
						let that = this
						// 修改用户信息接口  传参 op=information 传参 user_id 用户id   mobile  手机号  name 姓名  company  公司
						if(that.change_company==''||that.change_name==''){
							alert('请填写完整信息')
						}else if(that.changeAgo == true){
							// 如果手机号有修改,则需要判断 验证码								
							if(that.change_code == ''||that.change_code != that.yzcode){
								alert('验证码错误')
							}
						}
						this.$http.post(that.url, {
							op: 'information',
							mobile: that.change_tel,
							name: that.change_name,
							company: that.change_company,
							user_id: that.user_id,
						}, {
							emulateJSON: true
						}).then(function(res) {
							console.log((res))
							if(res.body.status == 0){
								that.change_success = true
								setTimeout(function(){
									that.change_success = false
								},1500)
							}else{
								alert(res.body.msg)
							}
						}, function(res) {
							console.log(res.status);
						});
					},
					// 验证码获取倒计时					
					getUcodeChange() {
						// 判断手机号
						var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
						if (myreg.test(this.change_mobile) == false) {
							alert('您的手机号填写错误')
							return false
						}
						if (!this.canClick) return //改动的是这两行代码
						this.canClick = false
						this.content = this.totalTime + 's重新发送'
						let clock = window.setInterval(() => {
							this.totalTime--
							this.content = this.totalTime + 's重新发送'
							if (this.totalTime < 0) {
								window.clearInterval(clock)
								this.content = '重新发送'
								this.totalTime = 30
								this.canClick = true //这里重新开启
							}
						}, 1000)
						// 修改手机号验证码接口  传参op=editcode  mobile手机号
						this.$http.post(this.url, {
							op: 'editcode',
							mobile: this.change_mobile,
						}, {
							emulateJSON: true
						}).then(function(res) {
							console.log(res)
							this.yzcode = res.body.code
						}, function(res) {
							console.log(res.body.status);
						});
					},
					// 获取用户信息
					getUserInfo() {
						let that = this
						let userInfo = JSON.parse(window.localStorage.userInfo).data
						console.log(userInfo)
						console.log(window.localStorage.userInfo)
						that.userInfo = userInfo
						that.change_tel = userInfo.mobile
						that.user_id = userInfo.id
						that.change_name = userInfo.name
						that.change_company = userInfo.company

					},
				},
				// 监控当前手机号变化
				watch: {
					'change_mobile': function() {
						console.log(this.change_tel + '============原始手机号')
						console.log(this.change_mobile + '===========修改后的手机号')
						// 判断当前手机号是否被修改							
						if (this.change_tel == this.change_mobile) {
							this.changeAgo = false
							console.log('同一个号码')
						} else {								
							this.changeAgo = true
							console.log("不是 同一个号码")
						}
						console.log(this.changeAgo)
					}
				},
				created() {
					let that = this
					that.getUserInfo()
				}
			});
		</script>
	</body>
</html>
